import { useState, useContext } from 'react';
import { PhoneOutlined, AudioOutlined } from '@ant-design/icons';

import AvatarImage from '../../../components/AvatarImage';

import { ContentType } from '../../../constants';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function(props) {
  const { onVedioEnable, onHangup, avatarUrl } = props;
  const mySdkStore = useContext(MySdkStoreContext);
  const [isVedioAvaliable, setIsVedioAvaliable] = useState(true);

  // 处理主动挂断事件
  const handleHangup = async () => {
    const msgBody = {
      msgType: ContentType.Rtc,
      msgContent: { rtcAction: 'hangUp' }
    };
    const msgParams = mySdkStore.sdk.messageBuilder(msgBody);
    await mySdkStore.sdk.sendMessage(msgParams);
    if(typeof onHangup === 'function') {
      onHangup();
    }
  }

  return (<div className='rtcInvitePage'>
    <div className="avatarArea">
      <AvatarImage
        src={avatarUrl}
        style={{ margin: '16px auto', borderRadius: '8px' }}
        fit='cover'
        width={100}
        height={100}
      />
      正在呼叫中
    </div>
    <div className="iconButtonArea">
      { isVedioAvaliable &&
      <div onClick={() => { setIsVedioAvaliable(false); onVedioEnable(false); }}>
        <div className="iconWrap">
          <AudioOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
        </div>
        转语音
      </div>
      }
      <div>
        <div className="iconWrap hangup" onClick={handleHangup}>
          <PhoneOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px', transform: 'rotate(225deg) translate(-2px, 2px)' }} />
        </div>
        挂断
      </div>
    </div>
  </div>
  )
}